<template>
  <div>
    <div class="crumbs">

      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 证书
        </el-breadcrumb-item>
        <el-breadcrumb-item>上传证书</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="container">
        <div class="form-box">
          <el-form ref="form"
                   :model="courseDto.course"
                   label-width="120px">
            <!-- 证书名称 -->
            <el-form-item class="cname"
                          label="证书名称"
                          size="mini">
              <el-input v-model="courseDto.course.cname"
                        style="width: 200px;"></el-input>
            </el-form-item>
            <!-- 证书内容 -->
            <el-form-item class="description"
                          label="证书内容"
                          size="mini">
              <el-input v-model="courseDto.course.description"
                        style="width: 1000px;"></el-input>
            </el-form-item>
            <!-- 封面 -->
            <el-form-item class="uploadCover"
                          size="mini">
              <UploadImg :avatarImg="courseDto.course.img"
                         @imgUrlChange="imageUrlChange"></UploadImg>
            </el-form-item>
            <el-form-item class="buttons">
              <el-button type="primary"
                         @click="onSubmit">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from '../common/uploadImg.vue';

export default {
    name: 'baseform',
    data() {
        return {
            courseDto: {
                course: {
                    cname: '',
                    description: '',
                    img: ''
                }
            }
        };
    },
    methods: {
        onSubmit() {
            console.log(this.courseDto);
            this.$axios
                .post('/api/avatar/insert', this.courseDto.course)
                .then((res) => {
                    console.log(res);
                })
                .catch();
            this.$message.success('提交成功！');
        },
        imageUrlChange(data) {
            console.log((this.courseDto.course.img = data));
             this.courseDto.course.img = data;
        }
    },
    //组建挂子
    components: {
        UploadImg
    }
};
</script>
<style>
.uploadCover {
    position: relative;
    left: -20px;
}

.category {
    position: relative;
    left: 300px;
    top: -220px;
}
.status {
    position: relative;
    left: 300px;
    top: -210px;
}
.coursetime {
    position: relative;
    left: 300px;
    top: -200px;
}
.establisher {
    position: relative;
    left: 300px;
    top: -350px;
}

.buttons {
    position: relative;
    top: 0px;
    left: 0px;
}
</style>